<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="keywords" content="加密,解密,文本加密">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自制文本加密和解密小程序网页版</title>
    <link rel="stylesheet" href="./EncryptAndDecrypt.css">
    <link rel="stylesheet" href="./vueAnimate.css">
</head>
<body>

    <header>
        <!-- <h1>wecome to</h1> -->
        <h1>自制文本加密和解密网页版</h1>
    </header>
    <main id="main">
        <textarea name="text" id="text" cols="30" rows="10" v-model="text" placeholder="这里输入你要加密/解密的文本">{{text}}</textarea>
        <input type="password" id="password" name="password" v-model="password" placeholder="密码允许中文和特殊字符，长度不能少于6个字符，不能多余24个字符">
        <select name="" id="" v-model="type">
            <option value="">选择操作</option>
            <option value="encrypt">进行加密</option>
            <option value="decrypt">进行解密</option>
        </select>
        <input type="button" id="run-button" value="执行" v-on:click="run()">
        <transition name="error-msg-show">
            <p id="show-password-error-msg" name="show-password-error-msg" v-if="mesShow" >{{message}}</p>
        </transition>  
    </main>

    <footer>
        <span>autor:</span><span>Hsc</span>
    </footer>
    <!-- 逻辑部分 -->
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    <script src="./EncryptAndDecrypt.js"></script>
    <script>
        new Vue({
            el : '#main',
            data : {
                text : '',
                password : '',
                type : '',
                mesShow : false,
                message :''
            },
            methods : {
                run : function(){
                    
                    if(this.text === ''){
                        this.message = '需要加密/解密的文本不能为空';
                        this.mesShow = true;
                    }else if(this.password === ''){
                        this.message = '密码不能为空';
                        this.mesShow = true;
                    }else if(this.type === ''){
                        this.message = '你没有选择操作';
                        this.mesShow = true;
                    }else{
                        if(this.type === 'encrypt'){
                            this.encrypt();
                        }else if(this.type === 'decrypt'){
                            this.decrypt();
                        }
                    }

                   

                   
                },
                encrypt : function(){
                    var reText = '';
                    reText = myPasswordFactory.encrypt(this.text,this.password);
                    if(reText === '密码不能少于6个字符' || reText === '密码不能多于24个字符'){
                        this.message = reText;
                        this.mesShow = true;
                    }else if(reText != ''){
                        this.text = reText;
                        this.message = '加密完成，请记住您的密码，因为我们没有忘记密码的解决方案';
                        this.mesShow = true;
                    }else {
                        this.message = '你的文本是空的';
                        this.mesShow = true;
                    }
                },
                decrypt : function(){

                    var reText = '';
                    reText = myPasswordFactory.decrypt(this.text,this.password);
                    if(reText === '密码错误'){
                        this.message = reText;
                        this.mesShow = true;
                    }else if(reText != ''){
                        this.text = reText;
                        this.message = '解密完成';
                        this.mesShow = true;
                    }
                }
            }
        });
    </script>
</body>
</html>